<script setup lang="ts">
import { App } from 'ant-design-vue';
import { useSettingView } from '../../../composables';
import SaveSetting from './save.vue';
import StarBackgroundContainer from '../components/star-background-container/index.vue';

const { modal } = App.useApp();

const { show } = useSettingView();

function onResetClick() {
  modal.warning({
    title: '重置游戏',
    content: '确定要重置游戏吗？会清空所有数据，且无法恢复。',
    onOk: () => {
      localStorage.removeItem('save');
      window.location.reload();
    },
  });
}
</script>

<template>
  <star-background-container v-if="show">
    <div
      class="h-10 flex-none flex items-center justify-center w-full relative"
    >
      <span class="text-base font-bold">设置</span>
      <div class="absolute left-2">
        <a-button @click="show = false">关闭</a-button>
      </div>
    </div>
    <div class="flex-1 overflow-auto p-2 flex flex-col gap-2">
      <save-setting></save-setting>
      <div>
        <a-button :danger="true" :block="true" @click="onResetClick">
          重置游戏
        </a-button>
      </div>
    </div>
  </star-background-container>
</template>
